<template>
    <div class="top">
        <div class="logo">
            <img src="../assets/images/logo.png" alt="">

            <!-- :value="sidebar"   @change="TOGGLE_SIDEBAR" -->
            <el-switch model-value="!sidebar" active-text="展开" inactive-text="收起" @change="sidebarType" />
        </div>
        <div class="info">
            <div>
                <!-- {{ username }} ({{ type == 1 ? '超级管理员' : type == 2 ? '普通管理员' : '观察员' }}) -->
            </div>
            <img class="user-img" src="../assets/images/gita.gif" alt="">
            <span>|</span>
            <span @click="logout">退出登录</span>
            <img src="../assets/images/cn.png" alt="">
        </div>
    </div>
</template>

<script>
// import { mapGetters, mapMutations } from 'vuex'
import { useStore } from "vuex";
import { defineComponent, computed, ref } from "vue";
export default defineComponent({
    name: 'MyHeader',
    setup() {
        let store = useStore();
        let sidebar = ref();
        sidebar = computed(() => {
            console.log(store.getters.sidebar);
            return store.getters.sidebar
        })
        function sidebarType() {
            store.commit('TOGGLE_SIDEBAR');
        }
        function logout() {
            store.dispatch('LogoutAction')
        }
        return { sidebarType, sidebar, logout }
    }
    // data() {
    //     return {

    //     };
    // },
    // computed: {
    //     // ...mapGetters(['sidebar', 'username', 'type'])
    // },

    // methods: {
    //     // ...mapMutations(['TOGGLE_SIDEBAR']),
    //     logout() {
    //         // this.$confirm('确认退出吗？', { type: 'warning' }).then(() => {
    //         //     this.$store.dispatch('LogoutAction')
    //         // })

    //     }
    // },
});
</script>

<style lang="less" scoped>
.top {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .logo {
        display: flex;
        align-items: center;

        img {
            height: 30px;
            width: auto;
            margin: 0 20px;
            vertical-align: auto;
        }
    }

    .info {
        display: flex;
        align-items: center;

        a {
            text-decoration: underline;
        }

        span {
            margin: 5px;
        }

        .user-img {
            width: 30px;
            height: 30px;
        }

        img {
            height: 50px;
            width: auto;
            margin: 0 5px;
            vertical-align: auto;
        }
    }
}
</style>